<template>
    <div class="header">
        <div class="header-left">
        <span class='icon iconfont icon-fanhui'></span>
        </div>
        <div class="header-input" placeholder=''>
         <span class='icon iconfont icon-sousuo'></span>
        输入城市/景点/游玩主题</div>
        <div class="header-right">城市
        <span class='icon iconfont icon-jiantouarrow486'></span>
      
        </div> 
    </div>
</template>

<script>
export default {
    name:'HomeHeader',
    props: {

    },
    data() {
        return {

        };
    },
   
   
};
</script>

<style scoped lang="stylus">
// 第一种方法
// @import  '../../../assets/styles/varibles.styl'
// 第二种方法
// @import  '~@/assets/styles/varibles.styl' 

//第三种方法   
// 在build 目录下下面 base.conf.js  配置别名  配置完成了要重新运行npm run  dev
@import  '~styles/varibles.styl'

   .header 
        height:.86rem
        display:flex
        background:$bgColor
        color:#fff
        line-height:0.86rem
        .header-left
            width:.64rem
            float:left
            .icon-fanhui
                text-align:center
                font-size:0.4rem
            
        .header-input
            flex:1
            border-radius:.1rem
            background:#fff
            height:0.64rem
            margin-top:.12rem
            margin-left:0.2rem
            color:#ccc
            text-align:left
            padding-left:0.2rem
            line-height:0.64rem

        .header-right
            width:1.24rem
            float:right
            text-align:center        

</style>
